@keyframes dashing {
  from {
    stroke-dashoffset: 200;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.ve-editor {
  width: 100%;
  height: 100%;
  position: relative;

  .ve-editor-back {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
  }

  .ve-minimap {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #fff;
    border: 1px solid #cecece;
    border-radius: 5px;
    overflow: hidden;
    width: 160px;
    height: 127px;

    .drag-rect {
      position: absolute;
      left: 0px;
      box-sizing: content-box;
      top: 0px;
      border: 2px solid #08c;
      cursor: pointer;
      transition: all 200ms ease;
    }

    .drag-point {
      width: 10px;
      height: 10px;
      border-radius: 5px;
      border: 2px solid #08c;
      background: #fff;
      position: absolute;
      right: -5px;
      bottom: -5px;
      cursor: nwse-resize;
    }
  }

  >.ve-editor-svg {
    cursor: grab;
    width: 100%;
    height: 100%;
    position: absolute;

    svg {
      position: absolute;
      left: 0;
      top: 0;
      outline: none;
    }

    .ve-node {
      .ve-node-shape:focus {
        outline: none;
      }

      &:hover,
      &.active {
        .ve-link-points {
          display: block;
        }
      }

      .ve-link-points {
        cursor: crosshair;
        display: none;

        &:hover,
        &.hover {
          fill: #4c79ff;
          cursor: crosshair;
          display: block;
        }
      }

      &.active {
        .icon-node {
          transition: stroke 400ms;
          stroke: rgba(76, 121, 255, 1);
        }
      }

      .ve-node-shape {
        cursor: move;

        &:hover {
          >.icon-node {
            stroke: #4c79ff;
            // fill-opacity: 0.2!important;
          }
        }

        &.success {
          .icon-node {
            stroke: green;
            fill: #fff;
          }
        }

        &.error {
          .icon-node {
            stroke: red;
          }
        }

        &.running {
          .icon-node {
            stroke: #4c79ff;
          }
        }
      }
    }

    .ve-line {
      .ve-line-path {
        transition: stroke-dasharray 300ms ease-out;
      }

      .ve-shdow-path {
        stroke: transparent;
        stroke-width: 5px;
        fill: none;
      }

      &:hover {
        .ve-line-shape {
          opacity: 0.5;
        }

        .ve-line-arrow {
          opacity: 0.5;
        }
      }

      &.active {
        .ve-line-arrow {
          stroke: #4c79ff;
        }

        path {
          stroke: #4c79ff;
        }
      }

      &.running {
        .ve-line-path {
          stroke-dasharray: 5 !important;
          animation: dashing 5s linear infinite;
        }
      }

      .ve-line-shape {

        cursor: pointer;
      }

      .ve-line-arrow {
        cursor: crosshair;
      }

      .ve-line-label {
        text {
          text-anchor: middle;
        }
      }
    }

    .anchor-line {
      stroke: #4c79ff;
    }

    .ve-paper-lineing {
      .ve-link-points {
        display: block;
      }
    }
  }

  >.ve-editor-html {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .anchor-back {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.ve-node-wrapper {
  border: 1px solid #08c;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  background-color: #fff;
  align-items: center;
}